<template>
  <view class="nursing-daily-container">
    <!-- 顶部选择栏 -->
    <view class="header-bar">
      <picker
        :range="weekdays"
        v-model="selectedDay"
        @change="onDayChange"
        class="picker"
      >
        <view class="picker-text">星期：{{ weekdays[selectedDay] }}</view>
      </picker>
      <picker
        :range="meals"
        v-model="selectedMeal"
        @change="onMealChange"
        class="picker"
      >
        <view class="picker-text">餐次：{{ meals[selectedMeal] }}</view>
      </picker>
    </view>

    <!-- 未选膳食 -->
    <view class="table-section">
      <text class="section-title">未选膳食</text>
      <view
        v-for="item in unselectedMeals"
        :key="item.mealitemId"
        class="card horizontal-card"
      >
        <image :src="item.imgUrl" class="meal-img-left" mode="aspectFill" />
        <view class="card-right">
          <text class="meal-name">{{ item.name }}</text>
          <text class="meal-desc">{{ item.description }}</text>
          <button class="view-btn" @click="addMeal(item.mealitemId)">
            订餐
          </button>
        </view>
      </view>
    </view>

    <!-- 已选膳食 -->
    <view class="table-section">
      <text class="section-title">已选膳食</text>
      <view
        v-for="item in selectedMeals"
        :key="item.mealitemId"
        class="card horizontal-card"
      >
        <image :src="item.imgUrl" class="meal-img-left" mode="aspectFill" />
        <view class="card-right">
          <text class="meal-name">{{ item.name }}</text>
          <text class="meal-desc">{{ item.description }}</text>
          <button
            class="view-btn remove-btn"
            @click="removeMeal(item.mealitemId)"
          >
            移除
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      clientId: null,
      weekdays: [
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
        "星期日",
      ],
      meals: ["早餐", "午餐", "晚餐"],
      selectedDay: 0,
      selectedMeal: 0,
      unselectedMeals: [],
      selectedMeals: [],
    };
  },
  onLoad(options) {
    this.clientId = options.clientId;
    this.fetchMeals();
  },
  // ✅ 下拉刷新钩子函数：重置两个下拉框并刷新数据
  onPullDownRefresh() {
    this.selectedDay = 0; // 重置星期为第一个
    this.selectedMeal = 0; // 重置餐次为第一个
    this.fetchMeals(); // 重新加载数据
    uni.stopPullDownRefresh(); // 停止下拉动画
  },
  methods: {
    onDayChange(e) {
      this.selectedDay = e.detail.value;
      this.fetchMeals();
    },
    onMealChange(e) {
      this.selectedMeal = e.detail.value;
      this.fetchMeals();
    },
    fetchMeals() {
      const day = this.weekdays[this.selectedDay];
      const meal = this.meals[this.selectedMeal];

      const params = {
        cur: 1,
        number: 1000,
        clientId: this.clientId,
        day,
        meal,
      };

      uni.request({
        url: "http://localhost:9000/mealpick/getExcludedProjects",
        method: "GET",
        data: params,
        success: (res) => {
          if (res.data.status === 200) {
            this.unselectedMeals = res.data.data || [];
          }
        },
      });

      uni.request({
        url: "http://localhost:9000/mealpick/getIncludedMeal",
        method: "GET",
        data: params,
        success: (res) => {
          if (res.data.status === 200) {
            this.selectedMeals = res.data.data || [];
          }
        },
      });
    },
    addMeal(mealitemId) {
      const day = this.weekdays[this.selectedDay];
      const meal = this.meals[this.selectedMeal];
      const url = `http://localhost:9000/mealpick/addMealpickService?clientId=${
        this.clientId
      }&day=${encodeURIComponent(day)}&meal=${encodeURIComponent(
        meal
      )}&mealitemId=${mealitemId}`;

      uni.request({
        url,
        method: "POST",
        success: (res) => {
          if (res.data.status === 200) {
            uni.showToast({ title: "添加成功", icon: "success" });
            this.fetchMeals();
          } else {
            uni.showToast({ title: "添加失败", icon: "none" });
          }
        },
        fail: () => {
          uni.showToast({ title: "请求失败", icon: "none" });
        },
      });
    },
    removeMeal(mealitemId) {
      const day = this.weekdays[this.selectedDay];
      const meal = this.meals[this.selectedMeal];
      const url = `http://localhost:9000/mealpick/removeMealpickService?clientId=${
        this.clientId
      }&day=${encodeURIComponent(day)}&meal=${encodeURIComponent(
        meal
      )}&mealitemId=${mealitemId}`;

      uni.request({
        url,
        method: "POST",
        success: (res) => {
          if (res.data.status === 200) {
            uni.showToast({ title: "移除成功", icon: "success" });
            this.fetchMeals();
          } else {
            uni.showToast({ title: "移除失败", icon: "none" });
          }
        },
        fail: () => {
          uni.showToast({ title: "请求失败", icon: "none" });
        },
      });
    },
  },
};
</script>

<style scoped>
.nursing-daily-container {
  padding: 20rpx;
  background-color: #fffbe6;
  min-height: 100vh;
}
.header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 20rpx;
}
.picker {
  flex: 1;
  margin-right: 10rpx;
  background-color: #fff;
  border-radius: 35rpx;
  border: 1rpx solid #faad14;
  padding: 20rpx;
}
.picker-text {
  font-size: 28rpx;
  color: #333;
}
.section-title {
  font-size: 30rpx;
  font-weight: bold;
  margin: 20rpx 0 10rpx;
  color: #fa541c;
}
.card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
}
.card-content text {
  display: block;
  color: #333;
  font-size: 35rpx; /* 字体从 26rpx → 30rpx */
  line-height: 48rpx; /* 增加行高，避免拥挤 */
  margin-bottom: 10rpx; /* 下边距略增 */
}

.card-footer {
  margin-top: 14rpx;
  text-align: right;
}
.view-btn {
  background-color: #18b566;
  color: white;
  padding: 6rpx 20rpx; /* 更小的内边距 */
  border-radius: 30rpx;
  font-size: 30rpx; /* 字体略增大 */
  border: none;
  min-height: 60rpx; /* 设置按钮最小高度避免过小 */
  line-height: 60rpx; /* 垂直居中 */
}

.remove-btn {
  background-color: #f56c6c;
}

.horizontal-card {
  display: flex;
  flex-direction: row;
  align-items: center; 
  padding: 20rpx;
  border-radius: 16rpx;
  background-color: #fff;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
  margin-bottom: 20rpx;
}

.meal-img-left {
  width: 240rpx;
  height: 180rpx;
  border-radius: 12rpx;
  object-fit: cover;
  margin-right: 20rpx;
}

.card-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.meal-name {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.meal-desc {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 12rpx;
  line-height: 36rpx;
}

.view-btn {
  background-color: #18b566;
  color: white;
  padding: 14rpx 0;
  border-radius: 30rpx;
  font-size: 28rpx;
  border: none;
  width: 100%;          /* ✅ 一整行宽度 */
  text-align: center;
  margin-top: 16rpx;     /* 与描述区分开 */
}


.remove-btn {
  background-color: #f56c6c;
}


</style>
